<template>
	<view class="com-button y-flex y-row y-align-center y-justify-center"
	:style="{
		'background-color': plain ? 'rgba(0,0,0,0)' : themeColor,
		'padding-top': buttonPaddingTopBottom,
		'padding-bottom': buttonPaddingTopBottom,
		'padding-left': buttonPaddingLeftRight,
		'padding-right': buttonPaddingLeftRight,
		'border-radius': pixelunit(radius),
		'border-width': plain ? '1px' : '',
		'border-style': 'solid',
		'border-color': type == 'default' ? '#333' : themeColor,
		'opacity': isDisabled ? 0.5 : 1
	}">
		<com-loading class="mr-10" :color="fontColor" :size="size" v-if="loading"></com-loading>
		<com-text :color="fontColor" :size="size" :value="value"></com-text>
		<view class="com-button-mask" :style="{
			'border-radius': pixelunit(radius)
		}" @tap.stop="handleTap"></view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 24
			},
			type: {
				type: String,
				default: 'default'
			},
			radius: {
				type: [Number, String],
				default: 5
			},
			padding: {
				type: [Number, String],
				default: '15rpx 20rpx'
			},
			plain: {
				type: Boolean,
				default: false
			},
			bgColor: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				themeColors: {
					'default': '#ffffff',
					'primary': '#007aff',
					'success': '#4cd964',
					'warning': '#f0ad4e',
					'error': '#dd524d'
				}
			}
		},
		computed: {
			themeColor () {
				return this.bgColor || this.themeColors[this.type]
			},
			fontColor () {
				return this.color || (this.type == 'default' ? '#333' : this.plain && this.type != 'default' ? this.themeColor : '#fff')
			},
			buttonPaddingTopBottom () {
				const paddings = this.padding.split(' ')
				return this.pixelunit(paddings[0] || 0)
			},
			buttonPaddingLeftRight () {
				const paddings = this.padding.split(' ')
				return this.pixelunit(paddings[1] || paddings[0] || 0)
			},
			isDisabled () {
				return this.loading || this.disabled
			}
		},
		methods: {
			pixelunit (size) {
				const text = size.toString()
				return text.indexOf('px') > -1 ? text : text + 'rpx'
			},
			handleTap (e) {
				if ( this.isDisabled ) return
				// #ifdef APP-NVUE
				e.stopPropagation()
				// #endif
				this.$emit('click', e)
			}
		}
	}
</script>

<style>
	.com-button {
		position: relative;
	}
	.com-button-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.com-button-mask:active {
		background-color: rgba(255,255,255,.5);
	}
</style>